<style>
    *{
        margin: 0;
        padding: 0;
    }

    .diaplay{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    .template{
        width: 100vw;
        height: 100vh;
        justify-content: space-between;
        background: url('layui/images/imgs/left-img.svg') no-repeat;
        background-size: auto 100%;
    }
    .left-img{
        width:auto;
        height:auto;
        /* border: 1px solid red; */
        position: relative;
    }
    /* 右边登录内容 */
    .right{
        width: 100%;
        height: 100%;
        justify-content: center;
        background: white;
    }
    .right-box{
        width: 400px;

        justify-content: center;

        padding: 30px;

        /* border: 1px solid red; */

    }
    .right-header{
        justify-content: flex-start;
    }
    .right-header img{
        width: auto;
        height: 30px;
        /* border: 1px solid red; */

    }
    .right-header p{

        font-size:23px;
        font-family: PingFang SC, PingFang SC-Heavy;
        font-weight: 800;
        text-align: left;
        color: #001837;
        margin-left: 8px;
    }
    .right-userName{
        justify-content:flex-start;
        margin-top: 30px;
    }
    .right-userName p{
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
    }
    .right-userName input{
        width: 100%;
        height: 50px;
        border: 1px solid #dddddd;
        outline: none;
        background: #f4f4f4;
        border-radius: 5px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #000000;
        margin-top: 10px;
        box-sizing: border-box;
        text-indent: 20px;
    }
    .right-userName input:focus{
        background: white;
    }
    .right-passWord{
        margin-top: 20px;
    }
    .right-code{
        margin-top: 20px;
    }
    .right-code-div{
        margin-top: 5px;
        justify-content: flex-start;

    }
    .right-code-div input{



    }
    .right-code-div img{
        width: 160px;
        height: 50px;
        margin-left: 10px;


    }
    /* 登录按钮 */
    .login{
        width: 230px;
        height: 50px;
        background: linear-gradient(180deg,#0390fe, #3563ea);
        border-radius: 5px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
        line-height: 52px;
        margin-top: 47px;
    }
</style>
<div class="template diaplay">
    <div style="width:540px;height: 100%;overflow: hidden;background-color: #FFFFFF">
        <img src="layui/images/imgs/left-img.svg" alt="" style="width:auto;height:100%"/>

    </div>
    <div class="right diaplay">
        <div class="right-box">
            <div class="right-header diaplay">
                <img src="layui/images/imgs/logo.svg" alt="">
                <p>登陆平台</p>
            </div>
            <form>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
                    <div class="layui-form-item right-userName">
                        <p>用户名</p>
                        <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
                    </div>
                    <div class="right-passWord right-userName">
                        <p>密码</p>
                        <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="请输入密码" class="layui-input">
                    </div>
                    <div class="right-code right-userName">
                        <p>图形验证码</p>
                        <div class="right-code-div diaplay">
                            <input type="text" name="vercode" lay-verify="required" id="LAY-user-login-vercode" autocomplete="off" placeholder="请输入图形验证码" class="layui-input">
                            <img src="" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
                        </div>
                    </div>
                    <div class="right-userName">
                        <p>谷歌验证码</p>
                        <input type="number" name="googleCode" id="LAY-user-login-google-code" placeholder="谷歌验证码（如未绑定不必填写）" class="layui-input">
                    </div>
                    <div class="layui-form-item" >
                        <div class="login layui-btn" id="login-btn2" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">登 入</div>
                    </div>
                    <!--<div class="layui-trans layui-form-item layadmin-user-login-other" style="margin-bottom: 20px">
                        <a lay-href="/user/reg" class="layadmin-user-jump-change">没有账户？前往注册</a>
                    </div>-->
                </div>
            </form>
        </div>

    </div>

</div>
<script>
    layui.use(['admin', 'form', 'user'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search;

        //变更网站标题
        var siteInfo = layui.data(layui.setter.tableName).siteInfo;
        $('.siteTitle').text(siteInfo.siteTitle);//变更网站标题

        $.loginOk = function(res) {
            //请求成功后，写入 access_token
            layui.data(setter.tableName, {
                key: setter.request.tokenName
                ,value: res.data.access_token
            });

            //登入成功的提示与跳转
            layer.msg('登入成功', {
                offset: '15px'
                ,icon: 1
                ,time: 1000
            }, function(){
                location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
            });
        };

        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){

            //请求登入接口
            admin.req({
                url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
                ,data: obj.field
                ,done: function(res){
                    $.loginOk(res);
                }
            });
        });

        $.randomString = function (len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        };

        $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
            var vercodeRandomStr = $.randomString(6) + new Date().getTime();
            $("#vercodeRandomStr").val(vercodeRandomStr);
            $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
        });

        $("#LAY-user-get-vercode").click();

        $(".layui-input").keyup(function(){
            //如果三个输入框都存在值， 则按钮不在置灰
            if($("#LAY-user-login-username").val().length > 0 && $("#LAY-user-login-password").val().length > 0 && $("#LAY-user-login-vercode").val().length > 0){
                $('#login-btn2').removeClass('login-opacity06').addClass('login-opacity10');
            }else{
                $('#login-btn2').removeClass('login-opacity10').addClass('login-opacity06');
            }
        });

    });
</script>